/**
 * CommentList
 * - author faryangsh@163.com
 */

import React, {Component} from 'react'
import CommentItem from '../CommentItem/CommentItem'
import PropTypes from 'prop-types';

// 定义评论列表组件类
class CommentList extends Component {
    render() {
        const comments=this.props.comments
        const display=comments.length === 0 ?'block':'none'
        return (
            <div className="col-md-8">
                <h3 className="reply">评论回复：</h3>
                <h2 style={{display: display}}>暂无评论，点击左侧添加评论！！！</h2>
                <ul className="list-group">
                    {
                        comments.map((comment,index) =>{
                            return <CommentItem comment={comment} key={index}
                                                deleteComment={this.props.deleteComment} index={index}/>
                        })
                    }
                </ul>
            </div>
        )
    }
}

CommentList.propTypes ={
    // 下面的定义可以忽略不写 TODO why
    comments:PropTypes.array.isRequired,
    deleteComment:PropTypes.func.isRequired
}

export default CommentList;